import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

import '../../../config/route/bt_app_router.gr.dart';
import '../../../data/models/bt_product.dart';
import '../models/bt_discover_model.dart';
import '../screens/bt_in_purchase_modal.dart';

class BtProductItemWidget extends StatelessWidget {
  const BtProductItemWidget({
    super.key,
    required this.index,
    required this.item,
    required this.model,
  });

  final int index;

  final BtProduct item;

  final BtDiscoverModel model;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Stack(children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Image.asset(
            item.cover,
            width: MediaQuery.of(context).size.width - 90,
            height: 80,
            fit: BoxFit.cover,
          ),
        ),
        Center(
            child: Padding(
          padding: const EdgeInsets.only(top: 25),
          child: Text(
            item.name,
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 20, color: Color(0xFFFFFFFF), fontWeight: FontWeight.bold),
          ),
        )),
        Visibility(
          visible: item.coin > 0,
          child: Positioned(
            top: 0,
            right: 0,
            child: Container(
                width: 58,
                height: 20,
                decoration: const BoxDecoration(
                    color: Color(0x66000000),
                    borderRadius:
                        BorderRadius.only(bottomLeft: Radius.circular(10), topRight: Radius.circular(10))),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(
                      'assets/images/bt_icon_coin.png',
                      width: 15,
                      height: 15,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 6),
                      child: Text(item.coin.toString(),
                          style: const TextStyle(
                              fontSize: 14, color: Color(0xFFFFFFFF), fontWeight: FontWeight.normal)),
                    )
                  ],
                )),
          ),
        )
      ]),
      onTap: () {
        EasyLoading.show(status: 'Loading...');
        model.consume(item.coin, (success, msg, orderNo) {
          if (success) {
            context.router.navigate(PaySuccessRoute(coins: '${item.coin}', orderNo: orderNo));
          } else {
            showInPurchaseModal(context);
          }
          EasyLoading.showToast(msg);
        });
      },
    );
  }
}
